<template>
	<view>
		<view :style="{'height':mHeight+'px'}">
			<l-signature disableScroll landscape ref="signatureRef" :penSize="8"></l-signature>
		</view>
		<view style="width: 750rpx;height: 150px;" class="dis-flex flex-center">
			<button class="btn" style="transform: rotate(90deg);" @click="onClick('clear')">清空</button>
			<button class="btn" style="transform: rotate(90deg);" @click="onClick('undo')">撤消</button>
			<button class="btn" style="transform: rotate(90deg);" @click="onClick('save')">提交签名</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				mHeight: 1000,
				src: '',
			}
		},

		onLoad(option) {
			this.id = option.id || '';
			this.src = option.src
			this.mHeight = uni.getSystemInfoSync().windowHeight - 150;
		},

		methods: {
			onClick(type) {
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							if (res.isEmpty) {
								this.$u.toast('请签名')
							} else {
								this.uploadFile(res.tempFilePath)
							}
						}
					})
				} else {
					if (this.$refs.signatureRef) this.$refs.signatureRef[type]()
				}

			},

			// 提交签名图片
			uploadFile(tempFilePaths) {
				this.$http.upload(this.$config.UrlSignUpload, {
					filePath: tempFilePaths,
					name: 'file',
					formData: {},
				}).then((res) => {
					console.log(JSON.stringify(res))
					if (res.code == 1) {
						this.submit(res?.data?.url);
					} else this.$api.toast(res.msg);
				})
			},

			submit(qzimg) {
				this.$http.post(this.$config.UrlEditContract, {
					id: this.id,
					qzimg,
					companyimg: this.src,
				}, {
					log: true,
					header: {
						'content-type': 'application/json'
					},
					showLoading:true
				}).then((res) => {
					this.$api.toast(res.msg);
					if (res.code == 1) {
						this.$store.commit('setRefreshOrder', 1);
						this.$api.back();
					}
				})
			},
		}
	}
</script>

<style>
	.btn {
		width: 100px;
		height: 34px;
		line-height: 34px;
		background-color: #00a600;
		/* margin-bottom: 20rpx; */
		border-radius: 20rpx;
		color: #fff;

		&:first-child {
			background-color: #ff5500;
		}

		&:nth-child(2) {
			background-color: #888;
		}
	}
</style>